<!--
 * @description:
 * @fileName: DirectorGrid
 * @author: 17076
 * @date: 2025/3/14-下午3:12
 * @version: V1.0.0
-->

<template>
  <el-row :gutter="10" style="margin-top: 10px">
    <el-col :span="16">
      <div class="flex-row director-left">
        <div class="flex-column left-lens" :style="{ height: $baseTableHeight(-95) + 'px' }">
          <span
            v-for="(item, index) in lensData"
            :key="index"
            :class="[ currentLens === index ? 'active' : '' ]"
            @click="handleLens(item, index)"
          >{{ item['index'] }}</span>
        </div>
        <div class="right-lens" :style="{ height: $baseTableHeight(-95) + 'px' }">
          <el-row v-if="currentLensData" :gutter="20">
            <el-col
              v-for="(item, index) in currentLensData['lensFrames']"
              :key="item.id"
              :span="6"
            >
              <div :class="['flex-column', 'flex-center', 'lens-image-content', currentImage === index ? 'active' : '']">
                <div v-if="item['fileId']" class="lens-image" :data-ratio="pictureScale">
                  <el-image
                    :src="downloadUrl + item.fileId"
                    fit="contain"
                    @click.native="handleImage(item, index)"
                  />
                  <span class="lens-tag">{{ index + 1 }}</span>
                  <div class="full-image" @click.stop="handleFullClick(index)">
                    <i class="el-icon-full-screen" />
                  </div>
                </div>
                <el-image v-else style="width: 100%;height: 100%">
                  <div slot="error" class="flex-column flex-center error-content">
                    <i class="el-icon-picture-outline"/>
                    <span>暂无图片</span>
                  </div>
                </el-image>
              </div>
            </el-col>
          </el-row>
          <el-empty v-else description="暂无镜头图片" style="height: 100%">
            <template slot="image">
              <img src="@/assets/common/empty_role.png"/>
            </template>
          </el-empty>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="director-right">
        <div class="comment-content">
          <p>评论</p>
          <div class="flex-row">
            <span
              v-for="type in editType"
              :key="type.code"
              :class="['type-item', currentLensFrame['commentType'] === type.code ? 'active' : '', { 'disabled': type.disabled || playData['revisionStatus'] === '2' }]"
              @click.stop="handleTypeClick(currentLensData['lensFrames'][currentImage], type)"
            >{{ type['name'] }}</span>
          </div>
          <el-input v-model="currentLensFrame['commentText']" type="textarea" :disabled="playData['createStatus'] === '6'" :rows="4" placeholder="请输入" style="margin-top: 10px" />
          <div v-if="playData['createStatus'] !== '6' && (currentLensFrame['fileId'] && currentLensFrame['fileId'] !== '')" style="text-align: right; margin-top: 10px">
            <el-button plain @click="handleCancel(currentLensFrame)">取消</el-button>
            <div class="liner-button" style="min-width: 0; padding: 0 16px; font-size: 12px; display: inline-block" @click="handleConfirm(currentLensFrame)">确定</div>
          </div>
        </div>
        <div class="comment-history">
          <p>历史记录</p>
          <div :style="{ height: ((playData['createStatus'] !== '6' && currentLensFrame['fileId'] && currentLensFrame['fileId'] !== '') ? $baseTableHeight(203) : $baseTableHeight(161)) + 'px', overflow: 'auto' }">
            <el-timeline v-if="commentHistory.length > 0">
              <el-timeline-item
                v-for="(item, index) in commentHistory"
                :key="index"
              >
                <div class="timeline-item">
                  <div class="flex-row">
                    <span>{{ item['commentTypeName'] }}</span>
                    <span style="margin-left: 20px; font-size: 12px;color: #5C6872">{{ item['createTime'] }}</span>
                  </div>
                  <div style="margin-top: 10px;color: #B6C7D1">{{ item['commentText'] }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
            <el-empty v-else description="暂无历史记录">
              <template slot="image">
                <img src="@/assets/common/empty_role.png"/>
              </template>
            </el-empty>
          </div>
        </div>
      </div>
    </el-col>
    <!--图片预览-->
    <cs-image-viewer
      v-if="showImageViewer"
      :initial-index="initialIndex"
      :url-list="formatterImageList(currentLensData['lensFrames'])"
      :on-close="() => { showImageViewer = false }"
    />
  </el-row>
</template>

<script>
import { baseURL } from '@/config/net.config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import { selectLensFrameComment, saveLensFrameComment } from '@/api/director'
import { mapGetters } from 'vuex'

export default {
  name: 'DirectorGrid',
  props: {
    playData: {
      type: Object,
      default: () => {}
    },
    // 分镜数据
    lensData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 当前选中的镜头
      currentLens: 0,
      // 当前选中的分镜图片下标
      currentImage: 0,
      // 当前选中的分镜数据
      currentLensData: {},
      // 当前选中的镜头数据
      currentLensFrame: {},
      // 是否显示图片预览
      showImageViewer: false,
      // 初始图片下标
      initialIndex: 0,
      // 修改类型
      editType: JSON.parse(sessionStorage.getItem('commentType')),
      // 评论历史
      commentHistory: [],
      // 图片下载链接
      downloadUrl: baseURL + commonDownloadFile
    }
  },
  computed: {
    // 分镜数据
    ...mapGetters({
      pictureScale: 'lens/pictureScale'
    })
  },
  watch: {
    // 监听分镜数据变化
    lensData: {
      immediate: true,
      handler(val) {
        if (val && val.length > 0) {
          this.currentLensData = val[0] || {}
          this.currentLensFrame = (this.currentLensData['lensFrames'] && this.currentLensData['lensFrames'].length > 0) ? this.currentLensData['lensFrames'][0] : {}
          if (this.currentLensFrame && this.currentLensFrame['id']) {
            this.getCommentHistory(this.currentLensFrame['id'] || '')
          }
        }
      }
    },
    editType: {
      immediate: true,
      handler: function(val) {
        if (val && val.length > 0) {
          val.map(item => {
            if (item.code !== '1') {
              this.$set(item, 'disabled', true)
            }
          })
        }
      }
    }
  },
  mounted() {
    console.log(this.currentLensFrame, 888888888)
  },
  methods: {
    // 格式化图片链接
    formatterImageList(item) {
      const imageList = []
      item.forEach((image) => {
        imageList.push({ url: this.downloadUrl + image.fileId })
      })
      return imageList
    },
    // 获取评论历史
    getCommentHistory(lensFrameId) {
      selectLensFrameComment({ lensFrameId }).then(res => {
        this.commentHistory = res.data.result
      })
    },
    // 修改类型点击
    handleTypeClick(item, type) {
      this.$set(item, 'commentType', type.code)
    },
    // 取消评论
    handleCancel(item) {

    },
    // 确定评论
    handleConfirm(item) {
      if (!item['commentType']) {
        this.$baseMessage.error('请选择修改类型')
        return
      } else if (!item['commentText']) {
        this.$baseMessage.error('请输入修改内容')
        return
      }
      this.$baseConfirm('系统已收到您的修改反馈，【确定】后将转交给设计人员修订。', '提示', async() => {
        const { code, msg } = await saveLensFrameComment({ lensFrameId: item.id, commentText: item.commentText, commentType: item.commentType })
        code === 200 ? this.$baseMessage.success(msg || '修改成功') : this.$baseMessage.error(msg || '修改失败')
        this.getCommentHistory(item['id'])
      })
    },
    // 放大预览
    handleFullClick(index) {
      this.initialIndex = index
      this.showImageViewer = true
    },
    // 分镜点击
    handleLens(item, index) {
      if (this.currentLens === index) return
      this.currentLensData = item
      this.currentLensFrame = item['lensFrames'][0]
      this.currentImage = 0
      this.currentLens = index
      this.getCommentHistory(item['lensFrames'][0]['id'])
    },
    // 分镜图片点击
    handleImage(item, index) {
      this.currentImage = index
      this.currentLensFrame = item
      this.getCommentHistory(item.id)
    }
  }
}
</script>

<style scoped lang="scss">
.director-left {
  color: #FFFFFF;
  background: $base-content-background;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  .left-lens {
    overflow-y: auto;
    width: 100px;
    padding: 0 10px;
    box-sizing: border-box;
    span {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border: 1px solid transparent;
      margin-bottom: 10px;
      border-radius: 20px;
      background: #272C36;
      text-align: center;
      cursor: pointer;
      &:hover {
        border: 1px solid #FFFFFF;
      }
      &.active {
        border: 1px solid #FFFFFF;
      }
    }
  }
  .right-lens {
    overflow-y: auto;
    flex: 1;
    padding: 0 10px;
    .lens-image-content {
      position: relative;
      width: 100%;
      aspect-ratio: $base-aspect-ratio-2;
      background: #272C36;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      margin-bottom: 10px;
      overflow: hidden;
      .lens-image {
        max-width: 100%;
        max-height: 100%;
        overflow: hidden;
        aspect-ratio: $base-aspect-ratio-1;
        &[data-ratio="2"] {
          aspect-ratio: $base-aspect-ratio-2;
        }
        &[data-ratio="3"] {
          aspect-ratio: $base-aspect-ratio-3;
        }
        &[data-ratio="4"] {
          aspect-ratio: $base-aspect-ratio-4;
        }
        &[data-ratio="5"] {
          aspect-ratio: $base-aspect-ratio-5;
        }
        &[data-ratio="6"] {
          aspect-ratio: $base-aspect-ratio-6;
        }
        &[data-ratio="7"] {
          aspect-ratio: $base-aspect-ratio-7;
        }
        &[data-ratio="8"] {
          aspect-ratio: $base-aspect-ratio-8;
        }
        .el-image {
          width: 100%;
          height: 100%;
        }
        .lens-tag {
          position: absolute;
          top: 5px;
          left: 5px;
          //width: 20px;
          //height: 20px;
          //line-height: 20px;
          min-width: 16px;
          padding: 3px;
          background: #FFFFFF;
          border-radius: 5px;
          color: #181C24;
          font-size: 12px;
          text-align: center;
        }
        .full-image {
          position: absolute;
          right: 5px;
          bottom: 5px;
          padding: 8px;
          border-radius: 5px;
          background: rgba(18, 20, 24, 0.50);
          cursor: pointer;
          display: none;
        }
      }
      &:hover {
        border-color: $base-color-default;
        .full-image {
          display: block;
        }
      }
      &.active {
        border-color: $base-color-default;
      }
    }
  }
}
.director-right {
  color: #FFFFFF;
  .comment-content {
    background: $base-content-background;
    border-radius: 8px;
    padding: 10px 20px;
    .type-item {
      background: #272C36;
      border: 1px solid #39414E;
      padding: 10px 0;
      border-radius: 3px;
      margin-right: 10px;
      cursor: pointer;
      text-align: center;
      flex: 1;
      &.active {
        border-color: #FFFFFF;
      }
      &.disabled {
        color: #686B7A;
        border-color: #39414E;
        cursor: not-allowed;
      }
    }
  }
  .comment-history {
    background: $base-content-background;
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 10px;
  }
}
::v-deep {
  .el-timeline {
    padding-left: 10px;
    padding-top: 10px;
  }
  .el-image__error {
    background: #272C36;
  }
}
</style>
